<!-- 新手引导 -->
<template>
    <div class="guide">
        <div class="tips">
            Hi {{ userInfo.userName }}，欢迎一起来了解
            <span>ddd</span>
            ，加速企业数字化升级！
        </div>
        <div class="content">
            <span class="title">
                <div class="line"></div>
                新手引导
            </span>
            <div class="cout">
                <div
                    class="item"
                    v-for="(item, index) in guideList"
                    :key="'guide-' + index"
                    @click="$router.push('/list')"
                >
                    <img :src="item.image" />
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { requireImg } from '@/utils/util.ts'
const userInfo = reactive({
    userName: 'Shaozj',
})
const guideList = ref([
    { title: '探索应用', image: requireImg('home/guide_1.png') },
    { title: '创建应用', image: requireImg('home/guide_2.png') },
    { title: '配置资源', image: requireImg('home/guide_3.png') },
    { title: '发布系统', image: requireImg('home/guide_4.png') },
])
</script>
<style scoped lang="scss">
.guide {
    padding: 16px 20px 0 20px;
    box-sizing: border-box;
    height: 100%;
    background: var(--color-white);
    border-radius: 8px;
    .tips {
        height: 45px;
        line-height: 45px;
        font-weight: 500;
        margin-bottom: 10px;
        span {
            color: var(--color-primary);
        }
    }
    .content {
        .title {
            display: flex;
            align-items: center;
            font-weight: bold;
            .line {
                width: 3px;
                height: 13px;
                background: var(--color-primary);
                border-radius: 8px 8px 8px 8px;
                margin-right: 4px;
            }
        }
        .cout {
            display: flex;
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            .item {
                width: 120px;
                height: 100px;
                position: relative;
                cursor: pointer;
                img {
                    width: 120px;
                    height: 100px;
                }
                span {
                    position: absolute;
                    width: 100%;
                    font-weight: bold;
                    text-align: center;
                    font-size: 12px;
                    left: 0;
                    bottom: 10px;
                }
            }
            .item:hover {
                border-radius: 8px;
                box-shadow: 0 2px 4px var(--background-color-mask-hover);
            }
        }
    }
}
</style>
